<template>
  <div>
    <h1>教师管理</h1>
    <el-button @click="addTeacherButtonClick">添加教师</el-button>
    <el-table :data="teacherStore.teachers" stripe>
      <el-table-column prop="name" label="教师姓名" sortable></el-table-column>
      <el-table-column prop="staffNumber" label="工号" sortable></el-table-column>
      <el-table-column prop="title" label="职称" sortable></el-table-column>
      <el-table-column prop="department" label="隶属院系" sortable></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button @click="editTeacher(scope.$index)">编辑</el-button>
          <el-button @click="deleteTeacher(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="teacherStore.currentPage"
      :page-size="teacherStore.pageSize"
      :total="teacherStore.total"
      @current-change="handleCurrentChange"
      layout="total, prev, pager, next"
    />
    <el-dialog v-model="addTeacherModal" title="添加教师">
      <el-form :rules="rules" ref="teacherFormRef" :model="teacherForm" label-width="80px">
        <el-form-item label="教师姓名" prop ="name">
          <el-input v-model="teacherForm.name"></el-input>
        </el-form-item>
        <el-form-item label="教师工号"  prop ="staffNumber">
          <el-input v-model="teacherForm.staffNumber"></el-input>
        </el-form-item>
        <el-form-item label="教师性别"  prop ="gender">
          <el-radio-group v-model="teacherForm.gender">
            <el-radio value="男">男</el-radio>
            <el-radio value="女">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="教师职称" prop ="title">
          <el-input v-model="teacherForm.title"></el-input>
        </el-form-item>
        <el-form-item label="隶属院系"  prop ="department">
          <el-input v-model="teacherForm.department"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="addTeacherModal = false">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useTeacherStore } from '@/stores/teacher';
import { ElButton, ElTable, ElTableColumn, ElDialog, ElForm, ElFormItem, ElInput } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus'
const isEditing = ref(false); // 标记是否处于编辑状态
const currentEditIndex = ref(-1); // 记录当前编辑条目的索引

const teacherStore = useTeacherStore();
const addTeacherModal = ref(false);
const teacherForm = ref({
  name: '',
  staffNumber: '',
  gender: '男',
  department: '',
  title: ''
});

const rules = reactive<FormRules<typeof teacherForm>>({
  staffNumber: [
    { required: true, message: '请输入工号', trigger: 'blur' }
  ],
  name: [
    { required: true, message: '请输入教师姓名', trigger: 'blur' }
  ],
  department: [
    { required: true, message: '请输入教师院系', trigger: 'blur' }
  ],
  title: [
    { required: true, message: '请输入教师职称', trigger: 'blur' },
   
  ],
  gender: [
    {required:true, message: '请选择教师性别', trigger: 'blur' }
  ]
});

const teacherFormRef = ref<FormInstance>();

const addTeacherButtonClick = () => {
  addTeacherModal.value = true;
  isEditing.value = false;
  teacherForm.value = {
    name: '',
    staffNumber: '',
    gender: '',
    department: '',
    title: ''
  };
};


const submitForm = async () => {
  await nextTick();
  teacherFormRef.value?.validate(async (valid) => {
    if (valid) {
      if (isEditing.value) {
        // 更新课程信息
        await teacherStore.updateTeacher(currentEditIndex.value, teacherForm.value);
      } else {
        await teacherStore.addTeacher(teacherForm.value);
      }
      addTeacherModal.value = false;
      isEditing.value = false;
      teacherForm.value = {
        name: '',
        gender: '',
        title: '',
        department: '',
        staffNumber: ''
      };
    }
  });
};



const editTeacher = (index: number) => {
  isEditing.value = true;
  currentEditIndex.value = index;
  addTeacherModal.value = true;
  // 将选中条目的信息回显到对话框中
  teacherForm.value = { ...teacherStore.teachers[index] };
};

const handleCurrentChange = (page: number) => {
  teacherStore.changePage(page);
};

const deleteTeacher = (index: number) => {
  teacherStore.deleteTeacher(index);
};
</script>